<template>
  <div class="a">
    <serchheader
      :input-array="inputArray"
      :select-array="selectArray"
      class="mb-20"
      @search="search($event)"
    />
    <el-card>
      <el-button type="primary" @click="addok">新增车型</el-button>
      <el-table :data="carlist" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="id" label="车型编号" />
        <el-table-column prop="name" label="车辆类型" />
        <el-table-column prop="num" label="车型数量" />
        <el-table-column prop="allowableLoad" label="应载重量(吨)" />
        <el-table-column prop="allowableVolume" label="应载体积(立方米)" width="130" />
        <el-table-column prop="measureLong" label="长(米)" width="70" />
        <el-table-column prop="measureWidth" label="宽(米)" width="70" />
        <el-table-column prop="measureHigh" label="高(米)" width="70" />
        <el-table-column prop="address" label="操作">
          <template v-slot="{row}">
            <el-button size="mini" type="text" style="color:blue" @click="editok(row.id)">编辑</el-button>
            <span>   |   </span>
            <el-button size="mini" type="text" style="color:red" @click="delok(row.id)">删除</el-button>
          </template>

        </el-table-column>

      </el-table>
      <!--              @size-change="handleSizeChange"
        @current-change="handleCurrentChange"   :current-page="currentPage4" -->
      <el-pagination
        :current-page="carlists.page"
        :page-sizes="[1, 2, 3, 4, 10]"
        :page-size="carslist.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <addcarmodel :id="id" ref="dialog" :isedit="isedit" :show-dialog.sync="showDialog" @updatecarmodel="carslist" />
  </div>
</template>

<script>
import Serchheader from '@/components/SearchHeader/serchheader.vue'
import { carlist, delcarmodel } from '@/api/car'
import Addcarmodel from './components/addcarmodel.vue'
// import { getList } from '@/api/table'
export default {
  components: { Serchheader, Addcarmodel },
  data() {
    return {
      isedit: false,
      showDialog: false,
      inputArray: [
        {
          label: '车型编号',
          key: 1
        },
        {
          label: '车辆类型',
          key: 2
        }
      ],
      selectArray: [
        {
          label: '应载重量',
          key: 9,
          data: [
            {
              label: '<1.8吨',
              value: 'RANGE_LEVEL_1'
            },
            {
              label: '1.8-6吨',
              value: 'RANGE_LEVEL_2'
            },
            {
              label: '6-14吨',
              value: 'RANGE_LEVEL_3'
            },
            {
              label: '14-30吨',
              value: 'RANGE_LEVEL_4'
            },
            {
              label: '30-50吨',
              value: 'RANGE_LEVEL_5'
            },
            {
              label: '50-100吨',
              value: 'RANGE_LEVEL_6'
            },
            {
              label: '100>吨',
              value: 'RANGE_LEVEL_7'
            }
          ]
        },
        {
          label: '应载体积',
          key: 6,
          data: [
            {
              label: '<3（m³）',
              value: 'RANGE_LEVEL_1'
            },
            {
              label: '3-5（m³）',
              value: 'RANGE_LEVEL_2'
            },
            {
              label: '5-10（m³）',
              value: 'RANGE_LEVEL_3'
            },
            {
              label: '10-15（m³）',
              value: 'RANGE_LEVEL_4'
            },
            {
              label: '15-30（m³）',
              value: 'RANGE_LEVEL_5'
            },
            {
              label: '30-50（m³）',
              value: 'RANGE_LEVEL_6'
            },
            {
              label: '50-80（m³）',
              value: 'RANGE_LEVEL_7'
            },
            {
              label: '80-150（m³）',
              value: 'RANGE_LEVEL_8'
            },
            {
              label: '>150（m³）',
              value: 'RANGE_LEVEL_9'
            }
          ]
        }
      ],
      carlist: [],
      total: 0,
      carlists: {
        page: 1,
        pageSize: 10,
        id: '',
        allowableLoad: '',
        name: '',
        allowableVolume: ''
      },
      id: ''
    }
  },
  created() {
    this.carslist()
  },
  methods: {
    search(dd) {
      console.log(dd)
      this.carlists.id = dd[1]
      this.carlists.name = dd[2]
      this.carlists.allowableLoad = dd[9]
      this.carlists.allowableVolume = dd[6]
      this.carslist()
    },
    async carslist() {
      console.log(1)
      const res = await carlist(this.carlists)
      console.log(res)
      this.total = +res.data.counts
      this.carlist = res.data.items
    },
    addok() {
      this.showDialog = true
      this.isedit = false
    },
    editok(id) {
      this.showDialog = true
      this.isedit = true
      this.id = id
      this.$nextTick(() => {
        this.$refs.dialog.getcarmodel()
      })
    },
    delok(id) {
      this.$confirm('你确定要删除吗').then(async() => {
        await delcarmodel(id)
        this.$message.success('删除成功')
        this.carslist()
      }).catch()
    },
    handleSizeChange(newsize) {
      console.log(newsize)
      this.carlists.pageSize = newsize
      this.carslist()
    },
    handleCurrentChange(newpage) {
      console.log(newpage)
      this.carlists.page = newpage
      this.carslist()
    }
  }
}
</script>

<style scoped>
.a {
  margin-top: 70px;
  padding-left: 15px;
}
</style>
